<template>
	<view>
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="立即提现"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">

		</view>
		<view class="" style="padding-top: 15px;position: relative;width: 92%;margin: 0 auto;">
			<view style="padding: 15px;background-color: #fff;border-radius: 10px;">
				<view style="font-size: 16px;color: #1D1F20;font-weight: 400;margin-bottom: 25px;">提现金额</view>
				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
				<!-- #ifndef APP-NVUE -->
				<u-input placeholder="输入提现金额" v-model="price" border="bottom">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input placeholder="输入提现金额" v-model="price" border="bottom">
						<!-- #endif -->
						<template slot="prefix">
							<view style="font-size: 20px;margin-right: 10px;color: #1D1F20;font-weight: 400;">￥</view>
						</template>
						<template slot="suffix">
							<view @click="all_ti" style="font-size: 16px;color: #2447FF;font-weight: 400;">全部</view>
						</template>
						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
				<view class="flex" style="margin-top: 15px;font-size: 14px;color: #1D1F20;font-weight: 400;">
					<view>当前可提现金额：</view>
					<view>{{all_price}}元</view>
				</view>
			</view>
			<view style="margin-top: 15px;padding: 15px;background-color: #fff;border-radius: 10px;">
				<view style="font-size: 16px;color: #1D1F20;font-weight: 400;margin-bottom: 25px;">绑定收款账户</view>
				<view class="cards" v-for="(item, index) in radiolist1" :key="index">
					<view class="flex">
						<image style="width: 24px;margin-right: 15px;" :src="item.img" mode="widthFix"></image>
						<view style="font-size: 14px;">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 10px;font-size: 12px;color: #747777;">{{com_info.withdrawalMsg}}</view>
			<!-- <view @click="shouxu" style="margin-top: 5px;font-size: 12px;color: #FF3331;">为什么要收取手续费?</view> -->
			<view @click="submit" style="margin-top: 30px;">
				<u-button shape='circle' type="primary" text="立即提现" :disabled="btnDisable"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: '',
				all_price: '',
				// 基本案列数据
				radiolist1: [{
						name: '',
						img: '/static/img/54.png',
					},
					{
						name: '',
						img: '/static/img/55.png',
					},
				],
				meinfo: '',
				com_info: '',
				btnDisable: false,
				bgColor: 'rgba(255,255,255,0)',
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = '#e3e6f4'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		onShow() {
			this.info()
		},
		onLoad() {
			this.common()

		},
		methods: {
			shouxu() {
				uni.navigateTo({
					url: '/pages/home/detail?all=all'
				})
			},
			async common() {
				let res = await this.$http.index.index()
				if (res.code == 1) {
					this.com_info = res.data
				}
			},
			async submit() {
				if (!this.btnDisable) {
					this.btnDisable = true
					let res = await this.$http.index.withdraw({
						money: this.price
					})
					if (res.code == 1) {
						this.$tips('提现成功，等待后台审核！')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/me/records'
							})
						}, 800)
					} else {
						this.$tips(res.msg)
					}
					this.btnDisable = false
				}
			},
			async info() {
				let res = await this.$http.index.my_index()
				if (res.code == 1) {
					let user = res.data.userinfo
					this.meinfo = res.data.userinfo
					this.all_price = res.data.userinfo.money
					this.radiolist1[0].name = res.data.userinfo.alipay_account == '' ? '请先绑定支付宝' : res.data.userinfo
						.alipay_account
					this.radiolist1[1].name = res.data.userinfo.bank_card == '' ? '请先绑定银行卡' : res.data.userinfo
						.bank_card
					if (user.authentication == '0') {
						this.$tips('请先实名认证')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/me/real_name'
							})
						}, 800)
					} else if (user.alipay_account == '' || user.alipay_account == null) {
						this.$tips('请先绑定账号')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/me/account'
							})
						}, 800)
					} else if (user.bank_card == '' || user.bank_card == null) {
						this.$tips('请先绑定银行卡')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/me/bank?ali_code=' + encodeURIComponent(JSON.stringify(
									user.alipay_account)) + '&ali_name=' + encodeURIComponent(JSON
									.stringify(user.alipay_realname))
							})
						}, 800)
					} else {
						this.meinfo = res.data.userinfo
						this.all_price = res.data.userinfo.money
						this.radiolist1[0].name = res.data.userinfo.alipay_account == '' ? '请先绑定支付宝' : res.data
							.userinfo.alipay_account
						this.radiolist1[1].name = res.data.userinfo.bank_card == '' ? '请先绑定银行卡' : res.data.userinfo
							.bank_card
					}

				}
			},
			//全部
			all_ti() {
				this.price = this.all_price
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			}
		}
	}
</script>
<style scoped lang="scss">
	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF,
	}

	.cards {
		margin-bottom: 20px !important;

		&:last-child {
			margin-bottom: 0px !important;
		}
	}
	
	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}
</style>

<style>
	page {
		background-color: #F7F9FA;
	}
</style>